<html>
<head>
<title>Lihat Responsive</title>
</head>
<style>
body{
	background:green;
}
*{
	margin:0;
	padding:0;
}
.papan{
	background:#09F;
	display:block;
	width:100%;
	margin-top:20%;
	padding:20px;
}
.papan:after{
	font-size:30px;
	color:white;
	content:"same or less than 1366px";
}
@media(max-width:1024px) {
.papan{background:#00c7f9}
.papan:after{ content:"same or less than 1024px"; }
}
@media(max-width:1000px) {
.papan{background:#f7c760}
.papan:after{ content:"same or less than 1000px"; }
}
@media(max-width:900px) {
.papan{background:#00af00}
.papan:after{ content:"same or less than 900px"; }
}
@media(max-width:800px) {
.papan{background:#00bc77}
.papan:after{ content:"same or less than 800px"; }
}
@media(max-width:700px) {
.papan{background:#806bf4}
.papan:after{ content:"same or less than 700px"; }
}
@media(max-width:600px) {
.papan{background:#605d5d}
.papan:after{ content:"same or less than 600px"; }
}
@media(max-width:500px) {
.papan{background:#bc00c6}
.papan:after{ content:"same or less than 500px"; }
}
@media(max-width:400px) {
.papan{background:#ff0098}
.papan:after{ content:"same or less than 400px"; }
}
</style>
<body>
<div class='papan'></div>
</body>
</html>